<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

	
<script>
    $(function () {
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID" },
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
            { title: "Product Name", width: 140, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
		    { title: "Order Date", width: 100, dataIndx: "OrderDate" },
		    { title: "Required Date", width: 100, dataIndx: "RequiredDate" },
		    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate" },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion" },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", minWidth: 150 }
		];
        var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            url: "/Content/invoice.json",
            getData: function (dataJSON) {
                var data = dataJSON.data;
                var rowdata = data[4];
                rowdata.pq_cellattr = {
                    CustomerName: { colspan: 2, style: "text-align:center;background:green;color:#fff;" },
                    ProductName: { style: "display:none;" }
                };
                rowdata.CustomerName = "I am merged cell. Check how I work when frozen in the middle.";
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
            }
        }

        var $grid = $("div#grid_freeze_columns").pqGrid({
            height: 500,            
            dataModel: dataModel,
            dragColumns: {enabled: false},
            pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
            colModel: columns,
            selectionModel: {type: 'row'},
            toolbar: {
                style: "text-align:center",
                items: [
                    { type: '<span>Number of frozen columns: </span>' },
                    { type: 'select', options: [0, 1, 2, 3], listeners: [
                        {
                            change: function (evt) {
                                $grid.pqGrid("option", "freezeCols", $(this).val());
                                $grid.pqGrid("refresh");
                            }
                        }
                    ]
                    },
                    { type: 'separator' },
                    { type: 'checkbox', style: 'margin-right:5px;', attr: 'id=wrapText checked="checked"', listeners: [
                        {
                            change: function (evt) {
                                if ($(this).is(":checked")) {
                                    $grid.pqGrid("option", { wrap: true, hwrap: true });
                                }
                                else {
                                    $grid.pqGrid("option", { wrap: false, hwrap: false });
                                }
                                $grid.pqGrid("refresh");
                            }
                        }
                    ]
                    },
                    { type: "<label for='wrapText'>Wrap Text</label>" }
                ]
            },
            numberCell: { resizable: true, width: 40, title: "#", minWidth: 25 },
            title: "Shipping Orders",
            resizable: true
        });
    });
        
</script>    
</head>
<body>
Similar to Microsoft Excel, columns can be frozen in ParamQuery Grid by setting the option freezeCols to a desired number.
<div id="grid_showhide_columns"></div>

</body>

</html>
